import { useIntl, useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import type { CardProps } from 'antd';
import dayjs from 'dayjs';
import * as echarts from 'echarts/core';
import { FC } from 'react';
import { Link } from 'umi';

import Card from '@/components/Card';
import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { mainPageControllerGetDayDod } from '@/services/ess/mainpageStation';
import { getLast7Days } from '@/utils/date';

import Styles from '../index.less';

type IDailyDischargeDepthCurveProps = CardProps;

export const DailyDischargeDepthCurve: FC<IDailyDischargeDepthCurveProps> = ({
  style,
  styles,
  ...restProps
}) => {
  const { initialState } = useModel('@@initialState');
  const { data = {} } = useRequest(mainPageControllerGetDayDod, {
    refreshDeps: [initialState?.stationId],
  });
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  const xAxisData: string[] = [];
  const yAxisData: (number | null)[] = [];
  data.data?.forEach((item) => {
    xAxisData.push(item.dataDate ?? '');
    yAxisData.push(item.dischargeDod ?? null);
  });

  if (xAxisData.length === 0) {
    xAxisData.push(...getLast7Days());
  }

  if (yAxisData.length === 0) {
    yAxisData.push(...Array(7).fill(null));
  }

  const option: MyChartOption = {
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        formatter: (value: string) => {
          return dayjs(value).format('MM-DD');
        },
      },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      name: '%',
      axisLine: {
        show: true,
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      // eslint-disable-next-line eqeqeq
      valueFormatter: (value) => (value == null ? '--%' : Number(value).toFixed(2) + '%'),
    },
    grid: {
      top: 30,
      right: 25,
      left: 5,
      bottom: 0,
      containLabel: true,
    },
    series: [
      {
        // eslint-disable-next-line eqeqeq
        data: yAxisData.map((item) => (item == null ? null : Number(item.toFixed(2)))),
        type: 'line',
        name: intl.formatMessage({ id: 'overviewPages.depthOfDischarge' }),
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(110, 89, 243, 0.8)' },
            { offset: 1, color: 'rgba(110, 89, 243, 0)' },
          ]),
        },
        lineStyle: {
          color: 'rgba(110, 89, 243, 1)',
        },
        itemStyle: {
          color: 'rgba(110, 89, 243, 1)',
        },
      },
    ],
  };

  return (
    <Card
      title={intl.formatMessage({ id: 'overviewPages.dayDepthCurve' })}
      style={{ height: '100%', display: 'flex', flexDirection: 'column', ...style }}
      styles={{
        body: {
          flex: 1,
        },
        ...styles,
      }}
      bodyStyle={{ paddingRight: 0 }}
      extra={
        <Link to={'/battery/dod'}>
          <div className={Styles.DetailText} style={{ marginLeft: '10px', cursor: 'pointer' }}>
            <span style={{ fontSize: '12px' }}>{intl.formatMessage({ id: 'global.detail' })}</span>
            <span>{' >'}</span>
          </div>
        </Link>
      }
      {...restProps}
    >
      <EchartsComponent option={option} height={isEnglish ? '100%' : '228px'} />
    </Card>
  );
};
